import React from 'react'

class PickerView extends React.Component {
    constructor(props){
        super(props)
        this.pickerView = React.createRef() // 相当于组件的钩子
        this.state = {
            value: [0, 1]
        }
        this.onChange = evt => {
            console.log(evt.detail.value)
            this.setState({
                value: evt.detail.value
            })
        }
    }
    componentDidMount(){
        this.pickerView.current.addEventListener('change', this.onChange)
    }
    componentWillUnmount(){
        this.pickerView.current.removeEventListener('change', this.onChange)
    }
    render(){
        return (
            <wx-picker-view
                ref={this.pickerView}
                style={{width: '100%',height: '300px'}}
                value={this.state.value}
            >
                <wx-picker-view-column>
                    <div>春</div>
                    <div>夏</div>
                    <div>秋</div>
                    <div>冬</div>
                </wx-picker-view-column>
                <wx-picker-view-column>
                    <div>2011</div>
                    <div>2012</div>
                    <div>2013</div>
                    <div>2014</div>
                    <div>2015</div>
                    <div>2016</div>
                    <div>2017</div>
                    <div>2018</div>
                    <div>2019</div>
                    <div>2020</div>
                </wx-picker-view-column>
            </wx-picker-view>
        )
    }
}
export default PickerView